<template>
    <div>
        <div class="comInf">
            <el-row class="entType">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('problemtype')}}</div></el-col>
                <el-col :span="19" class="right"><div class="grid-content bg-purple-light">{{detailData.classify ? detailData.classify : '/'}}</div></el-col>
            </el-row>
            <el-row class="merName">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('titl')}}</div></el-col>
                <el-col :span="19" class="right"><div class="grid-content bg-purple-light">{{detailData.title ? detailData.title : '/'}}</div></el-col>
            </el-row>
            <el-row class="regPro">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('probdesc')}}</div></el-col>
                <el-col :span="19" class="right"><div class="grid-content bg-purple-light">{{detailData.content ? detailData.content : '/'}}</div></el-col>
            </el-row>
            <el-row class="regImg">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('relapictures')}}</div></el-col>
                <el-col :span="19" class="right">
                    <div class="grid-content bg-purple-light">
                        <el-image v-if="imgList.img0" :src="imgList.img0" :preview-src-list="getSrcList(0)"></el-image>
                        <el-image v-if="imgList.img1" :src="imgList.img1" :preview-src-list="getSrcList(1)"></el-image>
                        <el-image v-if="imgList.img2" :src="imgList.img2" :preview-src-list="getSrcList(2)"></el-image>
                        <span v-if="!detailData.img">/</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="regNum">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('contactway')}}</div></el-col>
                <el-col :span="19" class="right"><div class="grid-content bg-purple-light">{{detailData.contact ? detailData.contact : '/'}}</div></el-col>
            </el-row>
            <el-row class="regNum">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('feedbacktime')}}</div></el-col>
                <el-col :span="19" class="right"><div class="grid-content bg-purple-light">{{detailData.gmtCreate ? detailData.gmtCreate : '/'}}</div></el-col>
            </el-row>
            <el-row class="handle">
                <el-col :span="5"><div class="grid-content bg-purple">{{$t('opratn')}}</div></el-col>
                <el-col :span="19" class="right">
                    <div class="grid-content bg-purple-light">
                        <span v-if="detailData.status !== 'END'">
                            <el-button type="primary" size="mini" v-if="detailData.status === 'PENDING'" @click="dispose">{{$t('dispose')}}</el-button>
                            <el-button type="primary" size="mini" v-if="detailData.status !== 'END' && detailData.status !== 'PENDING'" @click="endReplySuggest">{{$t('closequestion')}}</el-button>
                            <el-button type="primary" size="mini" v-if="detailData.status !== 'END' && detailData.status !== 'PENDING'" @click="replyquestions">{{$t('reply')}}</el-button>
                        </span>
                        <span v-if="detailData.status === 'END'">
                            {{$t('problemisover')}}
                        </span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="cardBox">
            <el-table border style="width: 100%" :data="messagelist">
                <el-table-column prop="sysModifiedName" :label="$t('sender')" width="75">
                </el-table-column>
                <el-table-column prop="content" :label="$t('content')">
                </el-table-column>
                <el-table-column prop="gmtCreate" :label="$t('sendtime')" width="150">
                </el-table-column>
            </el-table>
        </div>
        <!-- 回复框 -->
        <el-dialog :title="$t('reply')" :visible.sync="replyDialogVisible" width="30%" @close="replyDialogVisibleClosed(replySuggeestForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="replySuggeestForm" :rules="replySuggeest" :model="replySuggeestForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('remk')" prop="content" :placeholder="$t('plsipt')">
                    <el-input type="textarea" v-model="replySuggeestForm.content"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="replySuggest(replySuggeestForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="replyDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getappsuggestdetail,
    replyappsuggest,
    endreplyappsuggest,
    disposereplyappsuggest
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            id: '',
            detailData: {},
            imgArr: [],
            trbImg: '',
            replySuggeestForm: {
                appKind: '',
                content: '',
                source: 0,
                suggestId: ''
            },
            isOk: false,
            replyDialogVisible: false,
            messagelist: [],
            imgList: {},
            replySuggeest: {
                content: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        getAppFeedbackDet () {
            getappsuggestdetail(JSON.stringify({ id: this.id - 0 })).then(res => {
                if (res.data.code === '000000') {
                    if (res.data.data.list) {
                        for (let i = 0; i <= res.data.data.list.length - 1; i++) {
                            let item = res.data.data.list[i]
                            if (item.type === 0) item.type = this.$t('user')
                            if (item.type === 1) item.type = res.data.data.appUserName
                            if (item.sysModifiedName === '/') item.sysModifiedName = 'user:'
                        }
                        this.messagelist = res.data.data.list
                    }
                    if (res.data.data.img) {
                        for (let i = 0; i <= res.data.data.img.split(',').length - 1; i++) {
                            let item = res.data.data.img.split(',')[i]
                            this.imgArr.push(item)
                            this.imgList['img' + i] = item
                        }
                    }
                    this.detailData = res.data.data
                }
            })
        },
        dispose () {
            disposereplyappsuggest(JSON.stringify({ id: this.id })).then(res => {
                if (res.data.code === '000000') {
                    if (res.data.data.status === 1) {
                        this.$message({
                            message: this.$t('suctakeover'),
                            type: 'success'
                        })
                        this.getAppFeedbackDet()
                    } else {
                        this.$message.error(this.$t('takeoverfailure'))
                        this.getAppFeedbackDet()
                    }
                }
            })
        },
        replyquestions () {
            this.replySuggeestForm.suggestId = this.detailData.id - 0
            this.replySuggeestForm.appKind = this.detailData.appKind
            this.replyDialogVisible = true
        },
        replyDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        replySuggest (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                if (this.replySuggeestForm.appKind === this.$t('merchant')) this.replySuggeestForm.appKind = 'MER'
                if (this.replySuggeestForm.appKind === this.$t('personal')) this.replySuggeestForm.appKind = 'PSN'
                this.replySuggeestForm.content = this.replySuggeestForm.content.trim()
                replyappsuggest(JSON.stringify(this.replySuggeestForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('replytosuc'),
                            type: 'success'
                        })
                        this.replyDialogVisible = false
                        this.getAppFeedbackDet()
                    }
                })
            })
        },
        endReplySuggest (id) {
            this.$confirm(this.$t('whetoturnoffthecurrfeedback'), this.$t('closequestion'), {
                cancelButtonText: this.$t('cnl'),
                confirmButtonText: this.$t('cfm')
            }).then(async () => {
                await endreplyappsuggest(JSON.stringify({ id: this.id - 0 })).then(res => {
                    if (res.data.code === '000000') {
                        if (res.data.data.status === 1) {
                            this.$message({
                                message: this.$t('feedbackclosed'),
                                type: 'success'
                            })
                            this.getAppFeedbackDet()
                        } else {
                            this.$message.error(this.$t('closethefail'))
                            this.getAppFeedbackDet()
                        }
                    }
                })
            }).catch(() => {})
        },
        getSrcList (index) {
            return this.imgArr.slice(index).concat(this.imgArr.slice(0, index))
        }
    },
    mounted () {
        this.id = window.sessionStorage.getItem('feedbackid')
        this.getAppFeedbackDet()
    },
    destroyed () {
        window.sessionStorage.removeItem('feedbackid')
        this.imgArr = []
    }
}
</script>

<style lang="less" scoped>
@import './feedbackdet.less';
</style>
